<template>
  <div class="por ovh" ref="scrollBox" :style="{height: height + 'px'}">
    <p :style="{animationDuration: duration + 's'}"
       :text="text"
       ref="inner"
       :class="['poa t0 scroll__inner', {after: w > ow}]">
    </p>
  </div>
</template>

<script>
  export default {
    name: 'scroll-text',
    props: {
      // 每秒滚动长度（px）
      step: {
        type: Number | String,
        default: 24
      },
      // 显示内容文本
      text: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        height: 0,
        w: 0,
        ow: 0,
        left: 0,
        duration: 0
      };
    },
    mounted() {
      this.height = this.$refs.inner.offsetHeight;
      this.w = this.$refs.inner.offsetWidth;
      this.ow = this.$refs.scrollBox.offsetWidth;
      this.duration = this.w / this.step | 0;
    },
    methods: {}
  };
</script>

<style scoped lang="less">
  .scroll__inner {
    white-space: nowrap;
    &::before {
      content: attr(text);
      display: inline-block;
      vertical-align: top;
    }
    &.after {
      animation: goto infinite linear;
      &::after {
        content: attr(text);
        margin-left: 2em;
        display: inline-block;
        vertical-align: top;
      }
    }
  }

  @keyframes goto {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-50% - 1em));
    }
  }
</style>
